<!--# 
layout("/layout/default.html",{"menu":["apm","apm"],"breadcrumbs":[{"name":"告警列表"}]}){ 
 #-->
<style>
<!--
.charts {
	height: 400px
}

.fullscreen .charts {
	height: 100%
}
-->
</style>
<link rel="stylesheet" href="${base!}/resources/ace/css/chosen.css" />
<div class="row">
	<div class="col-xs-12 col-sm-8 widget-container-col">
		<div class="widget-box widget-color-blue">
			<!-- #section:custom/widget-box.options -->
			<div class="widget-header">
				<h5 class="widget-title bigger lighter">
					<i class="ace-icon fa fa-bar-chart"></i> ${obj.data.network.ip!} 主机实时性能曲线
				</h5>
				<div class="widget-toolbar">
					<a href="#" data-action="fullscreen" class="orange2"> <i class="ace-icon fa fa-expand"></i>
					</a>
				</div>
			</div>

			<!-- /section:custom/widget-box.options -->
			<div class="widget-body">
				<div class="widget-main no-padding charts" id="line"></div>
			</div>
		</div>
	</div>
	<!-- /.span -->
	<div class="col-xs-12 col-sm-4 widget-container-col">
		<div class="widget-box widget-color-blue">
			<!-- #section:custom/widget-box.options -->
			<div class="widget-header">
				<h5 class="widget-title bigger lighter">
					<i class="ace-icon fa fa-pie-chart"></i> ${obj.data.network.ip!} 主机实时运行仪表盘
				</h5>
				<div class="widget-toolbar">
					<a href="#" data-action="fullscreen" class="orange2"> <i class="ace-icon fa fa-expand"></i>
					</a>
				</div>
			</div>

			<!-- /section:custom/widget-box.options -->
			<div class="widget-body">
				<div class="widget-main no-padding charts" id="gauge"></div>
			</div>
		</div>
	</div>

	<div class="col-xs-12 col-md-12 col-sm-12 col-lg-9 widget-container-col">
		<div class="widget-box widget-color-blue">
			<!-- #section:custom/widget-box.options -->
			<div class="widget-header">
				<h5 class="widget-title bigger lighter">
					<i class="ace-icon fa fa-warning"></i> 告警设置
				</h5>
				<div class="widget-toolbar">
					<a href="#" data-action="fullscreen" class="orange2"> <i class="ace-icon fa fa-expand"></i>
					</a>
				</div>
			</div>

			<!-- /section:custom/widget-box.options -->
			<div class="widget-body">
				<div class="widget-main no-padding">
					<table class="table table-striped table-bordered table-hover">
						<thead class="thin-border-bottom">
							<tr>
								<th>项目</th>
								<th>当前</th>
								<th>设置</th>
							</tr>
						</thead>

						<tbody>
							<tr>
								<td class="">CPU</td>

								<td> <i class="red" id="cpu">${obj.data.cpuUsage!}%</i>
								</td>

								<td>达到 <input type="text" id="cpuAlarmPercent" class="input-sm spinner" value="${obj.data.config['cpu.alarm.percent']}" /> 发送 <select multiple id="cpuAlarmTypes"
									class="chosen-select form-control tag-input-style" data-placeholder="选择告警方式">
										<option value="EMAIL"${alarmType(obj.data.config['cpu.alarm.types'],'EMAIL') ?  'selected' : ''}>邮件</option>
										<option value="SMS"${alarmType(obj.data.config['cpu.alarm.types'],'SMS') ?  'selected' : ''}>短信</option>
										<option value="WECHAT"${alarmType(obj.data.config['cpu.alarm.types'],'WECHAT') ?  'selected' : ''}>微信</option>
								</select> 告警
									<button class="btn btn-sm btn-primary" onclick="setAlarm('cpu')">
										<i class="ace-icon fa fa-cogs align-top"></i> 设置
									</button>
								</td>
							</tr>

							<tr>
								<td class="">JVM</td>

								<td> <i class="red" id="jvm">${obj.data.jvmUasge!}%</i>
								</td>

								<td>达到 <input type="text" id="jvmAlarmPercent" class="input-sm spinner" value="${obj.data.config['jvm.alarm.percent']}" /> 发送 <select multiple="" id="jvmAlarmTypes"
									class="chosen-select form-control tag-input-style" data-placeholder="选择告警方式">
										<option value="EMAIL"${alarmType(obj.data.config['jvm.alarm.types'],'EMAIL') ?  'selected' : ''}>邮件</option>
										<option value="SMS"${alarmType(obj.data.config['jvm.alarm.types'],'SMS') ?  'selected' : ''}>短信</option>
										<option value="WECHAT"${alarmType(obj.data.config['jvm.alarm.types'],'WECHAT') ?  'selected' : ''}>微信</option>
								</select> 告警
									<button class="btn btn-sm btn-primary" onclick="setAlarm('jvm')">
										<i class="ace-icon fa fa-cogs align-top"></i> 设置
									</button>
								</td>
							</tr>

							<tr>
								<td class="">MEM</td>

								<td> <i class="red" id="ram">${obj.data.ramUasge!}%</i>
								</td>

								<td>达到 <input type="text" id="ramAlarmPercent" class="input-sm spinner" value="${obj.data.config['ram.alarm.percent']}" /> 发送 <select multiple="" id="ramAlarmTypes"
									class="chosen-select form-control tag-input-style" data-placeholder="选择告警方式">
										<option value="EMAIL"${alarmType(obj.data.config['ram.alarm.types'],'EMAIL') ?  'selected' : ''}>邮件</option>
										<option value="SMS"${alarmType(obj.data.config['ram.alarm.types'],'SMS') ?  'selected' : ''}>短信</option>
										<option value="WECHAT"${alarmType(obj.data.config['ram.alarm.types'],'WECHAT') ?  'selected' : ''}>微信</option>
								</select> 告警
									<button class="btn btn-sm btn-primary" onclick="setAlarm('ram')">
										<i class="ace-icon fa fa-cogs align-top"></i> 设置
									</button>
								</td>
							</tr>

							<tr>
								<td class="">Swap</td>

								<td> <i class="red" id="swap">${obj.data.swapUasge!}%</i>
								</td>

								<td>达到 <input type="text" id="swapAlarmPercent" class="input-sm spinner" value="${obj.data.config['swap.alarm.percent']}" /> 发送 <select multiple=""
									id="swapAlarmTypes" class="chosen-select form-control tag-input-style" data-placeholder="选择告警方式">
										<option value="EMAIL"${alarmType(obj.data.config['swap.alarm.types'],'EMAIL') ?  'selected' : ''}>邮件</option>
										<option value="SMS"${alarmType(obj.data.config['swap.alarm.types'],'SMS') ?  'selected' : ''}>短信</option>
										<option value="WECHAT"${alarmType(obj.data.config['swap.alarm.types'],'WECHAT') ?  'selected' : ''}>微信</option>
								</select> 告警
									<button class="btn btn-sm btn-primary" onclick="setAlarm('swap')">
										<i class="ace-icon fa fa-cogs align-top"></i> 设置
									</button>
								</td>
							</tr>

							<tr>
								<td class="">DISK</td>

								<td> <i class="red" id="disk">${obj.data.diskUsage!} %</i>
								</td>

								<td>达到 <input type="text" id="diskAlarmPercent" class="input-sm spinner" value="${obj.data.config['disk.alarm.percent']}" /> 发送 <select multiple=""
									id="diskAlarmTypes" class="chosen-select form-control tag-input-style" data-placeholder="选择告警方式">
										<option value="EMAIL"${alarmType(obj.data.config['disk.alarm.types'],'EMAIL') ?  'selected' : ''}>邮件</option>
										<option value="SMS"${alarmType(obj.data.config['disk.alarm.types'],'SMS') ?  'selected' : ''}>短信</option>
										<option value="WECHAT"${alarmType(obj.data.config['disk.alarm.types'],'WECHAT') ?  'selected' : ''}>微信</option>
								</select> 告警
									<button class="btn btn-sm btn-primary" onclick="setAlarm('disk')">
										<i class="ace-icon fa fa-cogs align-top"></i> 设置
									</button>
								</td>
							</tr>

							<tr>
								<td class="">NetInterface</td>

								<td> <i class="red" id="network">${obj.data.rxbps!} & ${obj.data.txbps!} b/s</i>
								</td>

								<td>达到 <input type="text" id="networkAlarmPercent" class="input-sm spinner" value="${obj.data.config['network.alarm.percent']}" /> 发送 <select multiple=""
									id="networkAlarmTypes" class="chosen-select form-control tag-input-style" data-placeholder="选择告警方式">
										<option value="EMAIL"${alarmType(obj.data.config['network.alarm.types'],'EMAIL') ?  'selected' : ''}>邮件</option>
										<option value="SMS"${alarmType(obj.data.config['network.alarm.types'],'SMS') ?  'selected' : ''}>短信</option>
										<option value="WECHAT"${alarmType(obj.data.config['network.alarm.types'],'WECHAT') ?  'selected' : ''}>微信</option>
								</select> 告警
									<button class="btn btn-sm btn-primary" onclick="setAlarm('network')">
										<i class="ace-icon fa fa-cogs align-top"></i> 设置
									</button>
								</td>
							</tr>

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- /.span -->
	<div class="col-xs-12 col-md-12 col-sm-12 col-lg-3 widget-container-col">
		<div class="widget-box widget-color-blue">
			<!-- #section:custom/widget-box.options -->
			<div class="widget-header">
				<h5 class="widget-title bigger lighter">
					<i class="ace-icon fa fa-server"></i> 服务器信息
				</h5>
				<div class="widget-toolbar">
					<a href="#" data-action="fullscreen" class="orange2"> <i class="ace-icon fa fa-expand"></i>
					</a>
				</div>
			</div>

			<!-- /section:custom/widget-box.options -->
			<div class="widget-body">
				<div class="widget-main no-padding">
					<table class="table table-striped table-bordered table-hover">
						<thead class="thin-border-bottom">
							<tr>
								<th>项目</th>
								<th>数据</th>
							</tr>
						</thead>

						<tbody>
							<tr>
								<td class="">IP</td>

								<td>${obj.data.network.ip!}</td>
							</tr>
							<tr>
								<td class="">主机名</td>

								<td>${obj.data.network.hostName!}</td>
							</tr>
							<tr>
								<td class="">操作系统名称</td>

								<td>${obj.data.system.osName!}</td>
							</tr>
							<tr>
								<td class="">系统架构</td>

								<td>${obj.data.system.arch!}</td>
							</tr>
							<tr>
								<td class="">操作系统版本</td>

								<td>${obj.data.system.osVersion!}</td>
							</tr>
							<tr>
								<td class="">CPU数量</td>

								<td>${obj.data.system.processors!}</td>
							</tr>
							<tr>
								<td class="">JRE版本</td>

								<td>${obj.data.system.javaVersion!}</td>
							</tr>
							<tr>
								<td class="">JRE 提供商</td>

								<td><a href="${obj.data.system.javaUrl!}" target="_blank"> ${obj.data.system.vendor!} </a></td>
							</tr>
							<!-- tr>
								<td class="">JAVA-HOME</td>

								<td>${obj.data.system.javaHome!}
								</td>
							</tr>
							<tr>
								<td class="">临时目录</td>

								<td>${obj.data.system.tmpdir!}
								</td>
							</tr -->


						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<!--# } #-->
<script src="${base!}/resources/ace/js/fuelux/fuelux.spinner.js"></script>
<script src="${base!}/resources/ace/js/chosen.jquery.js"></script>
<script src="${base!}/resources/ace/js/jquery.fullscreen.js"></script>
<script src="${base!}/resources/js/echarts.min.js"></script>
<script type="text/javascript">
	function setAlarm(type) {
		var percent = $('#' + type + 'AlarmPercent').val();
		var types = $('#' + type + 'AlarmTypes').val();
		$.post(getRootPath() + '/apm/setting', {
			type : type,
			percent : percent,
			types : types.join()
		}, function(result) {
			if (result.operationState == 'SUCCESS') {
				showMessage('设置成功!');
			} else {
				showMessage(result.data.reason);
			}
		}, 'json')
	}
	var line;
	var gauge;
	$('.fa-expand').on('click', function() {
		setTimeout(function() {
			line.resize();
			gauge.resize();
		}, 1000);
	});
	$(function() {
		$('.spinner').ace_spinner({
			value : 60,
			min : 0,
			max : 100,
			step : 5,
			on_sides : true,
			icon_up : 'ace-icon fa fa-plus bigger-110',
			icon_down : 'ace-icon fa fa-minus bigger-110',
			btn_up_class : 'btn-success',
			btn_down_class : 'btn-danger'
		});
		line = echarts.init($('#line')[0]);
		var option = {
			title : {
				text : '',
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : [ 'CPU', 'JVM', 'RAM', 'SWAP', 'NETWORK' ]
			},
			toolbox : {
				show : true,
				feature : {
					restore : {},
					saveAsImage : {}
				}
			},
			dataZoom : {
				show : false,
				start : 0,
				end : 100
			},
			xAxis : [ {
				type : 'category',
				boundaryGap : true,
				data : (genTimeLine())
			} ],
			yAxis : [ {
				type : 'value',
				scale : true,
				name : '百分比',
				max : 100,
				min : 0,
				boundaryGap : [ 0.2, 0.2 ]
			}, {
				type : 'value',
				scale : true,
				max : 5,
				min : 0,
				name : ' M/s',
				boundaryGap : [ 0.2, 0.2 ]
			} ],
			series : [ {
				name : 'CPU',
				type : 'line',
				smooth : true,
				data : (randomData(5, 100))
			}, {
				name : 'JVM',
				type : 'line',
				smooth : true,
				data : (randomData(5, 100))
			}, {
				name : 'RAM',
				type : 'line',
				smooth : true,
				data : (randomData(5, 100))
			}, {
				name : 'SWAP',
				type : 'line',
				smooth : true,
				yAxisIndex : 0,
				data : (randomData(5, 2))
			}, {
				name : 'NETWORK',
				type : 'line',
				smooth : true,
				yAxisIndex : 1,
				data : (randomData(5, 3))
			} ]
		};
		if (option && typeof option === "object") {
			line.setOption(option, true);
		}

		gauge = echarts.init($('#gauge')[0]);
		gaugeOption = {
			tooltip : {
				formatter : "{a} <br/>{c} {b}"
			},
			toolbox : {
				show : true,
				feature : {
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			series : [ {
				name : 'CPU',
				type : 'gauge',
				z : 3,
				min : 0,
				max : 100,
				splitNumber : 10,
				radius : '50%',
				axisLine : { // 坐标轴线
					lineStyle : { // 属性lineStyle控制线条样式
						width : 10
					}
				},
				axisTick : { // 坐标轴小标记
					length : 15, // 属性length控制线长
					lineStyle : { // 属性lineStyle控制线条样式
						color : 'auto'
					}
				},
				splitLine : { // 分隔线
					length : 20, // 属性length控制线长
					lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
						color : 'auto'
					}
				},
				title : {
					textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
						fontWeight : 'bolder',
						fontSize : 20,
						fontStyle : 'italic'
					}
				},
				detail : {
					textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
						fontWeight : 'bolder'
					}
				},
				data : [ {
					value : 40,
					name : 'CPU'
				} ]
			}, {
				name : 'NETWORK',
				type : 'gauge',
				center : [ '15%', '55%' ], // 默认全局居中
				radius : '30%',
				min : 0,
				max : 20,
				endAngle : 45,
				splitNumber : 4,
				axisLine : { // 坐标轴线
					lineStyle : { // 属性lineStyle控制线条样式
						width : 8
					}
				},
				axisTick : { // 坐标轴小标记
					length : 12, // 属性length控制线长
					lineStyle : { // 属性lineStyle控制线条样式
						color : 'auto'
					}
				},
				splitLine : { // 分隔线
					length : 20, // 属性length控制线长
					lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
						color : 'auto'
					}
				},
				pointer : {
					width : 5
				},
				title : {
					offsetCenter : [ '0', '0' ], // x, y，单位px
				},
				detail : {
					textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
						fontWeight : 'bolder'
					}
				},
				data : [ {
					value : 30,
					name : 'NI'
				} ]
			}, {
				name : 'JVM',
				type : 'gauge',
				center : [ '85%', '50%' ], // 默认全局居中
				radius : '30%',
				min : 0,
				max : 100,
				startAngle : 135,
				endAngle : 45,
				splitNumber : 10,
				axisLine : { // 坐标轴线
					lineStyle : { // 属性lineStyle控制线条样式
						width : 8
					}
				},
				axisTick : { // 坐标轴小标记
					splitNumber : 5,
					length : 10, // 属性length控制线长
					lineStyle : { // 属性lineStyle控制线条样式
						color : 'auto'
					}
				},
				axisLabel : {
					formatter : function(v) {
						switch (v + '') {
						case '0':
							return 'L';
						case '80':
							return 'W';
						case '100':
							return 'H';
						}
					}
				},
				splitLine : { // 分隔线
					length : 15, // 属性length控制线长
					lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
						color : 'auto'
					}
				},
				pointer : {
					width : 2
				},
				title : {
					show : false
				},
				detail : {
					show : false
				},
				data : [ {
					value : 50,
					name : 'JVM'
				} ]
			}, {
				name : 'RAM',
				type : 'gauge',
				center : [ '85%', '50%' ], // 默认全局居中
				radius : '30%',
				min : 0,
				max : 100,
				startAngle : 315,
				endAngle : 225,
				splitNumber : 10,
				axisLine : { // 坐标轴线
					lineStyle : { // 属性lineStyle控制线条样式
						width : 8
					}
				},
				axisTick : { // 坐标轴小标记
					show : false
				},
				axisLabel : {
					formatter : function(v) {
						switch (v + '') {
						case '0':
							return 'L';
						case '80':
							return 'W';
						case '100':
							return 'H';
						}
					}
				},
				splitLine : { // 分隔线
					length : 15, // 属性length控制线长
					lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
						color : 'auto'
					}
				},
				pointer : {
					width : 2
				},
				title : {
					show : false
				},
				detail : {
					show : false
				},
				data : [ {
					value : 100,
					name : 'RAM'
				} ]
			} ]
		};
		gauge.setOption(gaugeOption);
		function genTimeLine() {
			var date = new Date();
			var target = [];
			for (var i = 0; i < 5; i++) {
				target.push(new Date(date.getTime() - (80000 - (i * 2000))).format('mm:ss'));
			}
			return target;
		}
		function randomData(length, max) {
			var target = [];
			for (var int = 0; int < length; int++) {
				target.push(Math.random() * max);
			}
			return target;
		}
		function keepLength(array, length) {
			if (array.length > length) {
				for (var i = 0; i < array.length - length; i++) {
					array.splice(i, 1);
				}
			}
		}

		setInterval(function() {

			$.post(getRootPath() + "/sigar", {
				type : 'ALL'
			}, function(result) {
				if (result.operationState == 'SUCCESS') {
					gaugeOption.series[0].data[0].value = result.data.cpuUsage.toFixed(2) - 0;
					$('#cpu').text((result.data.cpuUsage.toFixed(2) - 0) + '%');
					$('#disk').text((result.data.diskUsage.toFixed(2) - 0) + '%');
					gaugeOption.series[1].data[0].value = (result.data.network.rxbps / 1024 / 1024 / 8).toFixed(2) - 0;
					$('#ram').text((result.data.ramUasge.toFixed(2) - 0) + '%');
					$('#jvm').text((result.data.jvmUasge.toFixed(2) - 0) + '%');
					$('#swap').text((result.data.swapUasge.toFixed(2) - 0) + '%');
					$('#network').text(
							((result.data.network.rxbps / 1024 / 1024 / 8).toFixed(2) - 0) + ' & ' + ((result.data.network.txbps / 1024 / 1024 / 8).toFixed(2) - 0) + ' M/s');

					gaugeOption.series[2].data[0].value = result.data.jvmUasge.toFixed(2) - 0;
					gaugeOption.series[3].data[0].value = result.data.ramUasge.toFixed(2) - 0;
					gauge.setOption(gaugeOption, true);

					option.series[0].data.push(result.data.cpuUsage.toFixed(2) - 0);
					option.series[1].data.push(result.data.jvmUasge.toFixed(2) - 0);
					option.series[2].data.push(result.data.ramUasge.toFixed(2) - 0);
					option.series[3].data.push(result.data.swapUasge.toFixed(2) - 0);
					option.series[4].data.push((result.data.network.rxbps / 1024 / 1024 / 8).toFixed(2) - 0);
					option.xAxis[0].data.push(new Date().format('mm:ss'));
					keepLength(option.series[0].data, 25);
					keepLength(option.series[1].data, 25);
					keepLength(option.series[2].data, 25);
					keepLength(option.series[3].data, 25);
					keepLength(option.series[4].data, 25);
					keepLength(option.xAxis[0].data, 25);
					line.setOption(option, true);

				} else {
					location.reload(true);
				}
			}, 'json');

		}, 1000);
	})
</script>